@base-color: #975ec9;
@common-wd: 30px;
@assets-img: '../assets/images/';
@base-red: #F20500;

.flex(@justify-content: center, @align-items: center) when (iskeyword(@justify-content)),
(iskeyword(@align-items)) {
    display: flex;
    justify-content: @justify-content;
    align-items: @align-items;
}

.commonBack(@url) when (isstring(@url)) {
    background: url("@{assets-img}@{url}") no-repeat center;
    background-size: 100%;
}

.coverScreen(@position: absolute, @backColor: #fff) when (iskeyword(@position)),
(iscolor(@backColor)) {
    position: @position;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: @backColor;
}

.positionCenter(@position: absolute) when (iskeyword(@position)) {
    position: @position;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.positionLeft(@position: absolute, @left: @common-wd) when (iskeyword(@position)),
(ispixel(@left)) {
    position: @position;
    top: 50%;
    left: @left;
    transform: translate3d(0, -50%, 0);
}

.positionRight(@position: absolute, @right: @common-wd) when (iskeyword(@position)),
(ispixel(@right)) {
    position: @position;
    top: 50%;
    right: @right;
    transform: translate3d(0, -50%, 0);
}

.font(@font-size, @color: #333, @text-align: left) when (ispixel(@font-size)),
(iscolor(@color)),
(iskeyword(@text-align)) {
    font-size: @font-size;
    color: @color;
    text-align: @text-align;
}

.wh(@w, @h) when (ispixel(@w))or(ispercentage(@w)),
(ispixel(@h))or(ispercentage(@h)) {
    width: @w;
    height: @h;
}